<!-- subpkg_consult/order_list/components/order-list.vue -->
<script lang="ts" setup>
  import orderList from './components/order-list.vue'
  import custonTabs from './components/custon-tabs.vue'
  import { ref } from 'vue'

  // 1. 标签页数组
  const tabIndex = ref(0)
  const orderTabs = ref([
    { label: '问医生', rendered: true },
    { label: '极速问诊', rendered: false },
    { label: '开药问诊', rendered: false },
  ])
  const changeTabs = (index: number) => {
    // console.log(index)
    tabIndex.value = index
    // 保证每个标签页只会被渲染一次
    orderTabs.value[index].rendered = true
  }
</script>

<template>
  <custon-tabs :data="orderTabs" @change="changeTabs" />
  <!-- 列表组件 -->
  <!-- v-show---点击时创建，切换后销毁 -->
  <view v-for="(tab, index) in orderTabs" :key="index" v-show="tabIndex === index">
    <order-list v-if="tab.rendered" :type="tabIndex + 1" />
  </view>
</template>

<style lang="scss"></style>
